<template>
  <div class="main-box">
    <TreeFilter
      label="name"
      title="供应商区域"
      :data="treeFilterData"
      :default-value="initParam.supplierCode"
      @change="changeTreeFilter"
    />
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="供应商列表"
        row-key="id"
        border
        :indent="20"
        :columns="columns"
        :request-api="getSupplierList"
        :init-param="initParam"
        :is-span-method="true"
        :request-auto="false"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openDialog('新增', initData)">
            新增供应商
          </el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button v-auth="'edit'" type="primary" link :icon="EditPen" @click="openDialog('编辑', scope.row)"> 编辑 </el-button>
          <el-button v-auth="'delete'" type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button>
        </template>
      </ProTable>
    </div>
    <SupplierDialog ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx" name="supplierList">
import { onMounted, reactive, ref } from "vue";
import { Inventory } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getSupplierRegionList, getSupplierList, deleteSupplier, editSupplier, createSupplier } from "@/api/modules/inventory";
import SupplierDialog from "@/views/inventory/components/SupplierDialog.vue";
import { getDicData } from "@/api/modules/system";

const proTable = ref<ProTableInstance>();
const initParam = reactive({ supplierCode: 0 });

const treeFilterData = ref<any>([]);
const initData = reactive({
  id: 0,
  settleType: 1,
  businessType: 1,
  commissionRate: 0,
  monCheckCyclse: 30,
  checkOutCycle: 30
});

const getTreeFilter = async () => {
  const { data } = await getSupplierRegionList({ pageNum: 1, pageSize: 9999 });
  treeFilterData.value = data.list;
  initParam.supplierCode = treeFilterData.value[0].id;
};

// 树形筛选切换
const changeTreeFilter = (val: any) => {
  proTable.value!.pageable.pageNum = 1;
  initParam.supplierCode = val;
};

// 表格配置项
const columns: ColumnProps<Inventory.ResSupplierList>[] = [
  { type: "index", label: "序号", width: 60 },
  { sortable: true, prop: "name", label: "供应商名称", minWidth: 160, align: "left", search: { el: "input" } },
  { sortable: true, prop: "supplierCode", label: "供应商编码", minWidth: 160, align: "left" },
  { sortable: true, prop: "helpCode", label: "助记码", minWidth: 160, align: "left" },
  {
    sortable: true,
    prop: "businessType",
    label: "经营方式",
    minWidth: 160,
    enum: () => getDicData("OperateWay"),
    fieldNames: { label: "description", value: "value" }
  },
  { sortable: true, prop: "commissionRate", label: "商户提成率", minWidth: 120, align: "left" },
  {
    sortable: true,
    prop: "settleType",
    label: "结账方式",
    minWidth: 120,
    enum: () => getDicData("SettleType"),
    fieldNames: { label: "description", value: "value" }
  },
  { prop: "operation", label: "操作", width: 145, align: "right", fixed: "right" }
];

// 删除
const deleteAccount = async (params: Inventory.ResSupplierList) => {
  await useHandleData(deleteSupplier, { id: params.id }, `删除【${params.name}】供应商`);
  proTable.value?.getTableList();
};

const dialogRef = ref<InstanceType<typeof SupplierDialog> | null>(null);
const openDialog = (title: string, row: Partial<Inventory.ResSupplierList> = {}) => {
  const params = {
    title,
    row: { ...row },
    isView: title === "查看",
    api: title === "新增" ? createSupplier : title === "编辑" ? editSupplier : undefined,
    areaList: treeFilterData.value,
    getTableList: proTable.value?.getTableList
  };
  dialogRef.value?.acceptParams(params);
};

onMounted(() => {
  getTreeFilter();
});
</script>
